<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta
            name="viewport"
            content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>高德地图各公司地点展示</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<!--加载高德-->
<script src="https://webapi.amap.com/loader.js"></script>
<!--导入数据js文件-->
<script type="text/javascript" src='data_js.js'></script>
<script>
    //将data_js文件中的数据进行转换
    var list_jobs = []
    for (let item of jobs) {
        // 将字符串中的单引号替换为双引号
        let s = item.gps;
        let gps = s.replace(/'/g, '"');
        //将gps字符串转换为json对象
        GPS = JSON.parse(gps)
        let a = {"lnglat": [GPS.longitude, GPS.latitude], "brandName": item.brandName,"cityName":item.cityName}
        list_jobs.push(a)
    }
    console.log(list_jobs)

    //创建标记点函数
    function mark_piont(position,name,map){
        //创建标记点
        new AMap.Marker({
            map:map,
            position: position,
            anchor:'bottom-center',
            offset: new AMap.Pixel(0, 0),
            label:{
                direction:'bottom',
                offset: new AMap.Pixel(2, 0),  //设置文本标注偏移量
                content: "<div class='info'>"+name+"</div>", //设置文本标注内容
            }
        });
    }

</script>
<script type="text/javascript">
    //设置高德地图的安全密钥
    window._AMapSecurityConfig = {
        securityJsCode: "048317ed86620f203895b5ff4238b325",  //安全密钥
    };

    AMapLoader.load({
        key: "495cff9ea5a204fd8f893580f7f0ac01", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    })
        .then((AMap) => {
            //创建地图
            const map = new AMap.Map("container", {
                viewMode: '2D', //默认使用 2D 模式
                zoom: 12, //地图级别
                center: [113.260691, 22.979229], //地图中心点方唐鹅饭店
            });
            //创建海量标记点对象
            var massMarks = new AMap.MassMarks(list_jobs, {
                zIndex: 5, //海量点图层叠加的顺序
                zooms: [3, 19], //在指定地图缩放级别范围内展示海量点图层
                 //设置标记点的样式
                style: {
                    url: "https://webapi.amap.com/images/mass/mass0.png", //红色点状图标的链接地址
                    size: new AMap.Size(11, 11), //图标大小
                    anchor: new AMap.Pixel(5, 5), //图标显示位置偏移量，基准点为图标左上角
                }
            });

            //将海量标记点添加到地图
            massMarks.setMap(map);

            //创建文本标记点，用于显示文本。并绑定地图对象
            var text_marker = new AMap.Marker({content: ' ', map: map});
            //给海量标记点对象绑定鼠标悬停事件
            massMarks.on('mouseover', function (e) {
                text_marker.setPosition(e.data.lnglat);
                text_marker.setLabel({content: e.data.brandName+"-"+e.data.cityName})
            });

            //创建方唐鹅标记点
            mark_piont([113.260691, 22.979229],"方唐鹅",map)

            //创建市头村(公交站)标记点
            mark_piont([113.394656,23.016231],"市头村公交车站",map)

            //创建新造职中公交车站标记点
            mark_piont([113.431435,23.045053],"新造职中公交车站",map)

            //创建礼村公交车站标记点
            mark_piont([113.313729,23.015092],"礼村公交车站",map)

            //创建员岗地铁站 标记点
            mark_piont([113.365641,23.015962],"员岗地铁站",map)

        })
        .catch((e) => {
            console.error(e); //加载错误提示
        });
</script>